<template>
    <div class="login-index" :style="backgroundDiv">
        <div class="mid-index">
            <i style="top: 40px;font-size: 28px;left: 20px;position: absolute;" class="iconfont icon-r-love">
                体检中心管理系统
            </i>
            <el-form :model="loginForm" :rules="loginRules" ref="ruleForm" class="loginForm">
                <el-form-item prop="id">
                    <!--必须绑定v-model输入框才能输入字符---->
                    <el-input v-model="loginForm.username">
                        <i slot="prefix" class="iconfont icon-r-user1" style="font-size: 22px"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" show-password>
                        <i slot="prefix" class="iconfont icon-r-lock" style="font-size: 22px"></i>
                    </el-input>
                </el-form-item>

                <!-- 角色单选框 -->
                <el-form-item>
                    <el-radio-group v-model="role" size="small">
                        <el-radio label="管理员登录" ></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item class="btns">
                    <el-button type="primary" style="font-size: 30px" @click="submitLoginForm('ruleForm')">
                        <i class="iconfont icon-r-yes" style="font-size: 20px"></i>
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request.js";
import {getUserName, setToken, setUserName} from "@/utils/storage.js";
import { toLoad } from "@/utils/initialize.js";

export default {
    name: "Login",
    data() {
        return {
            //背景图片
            backgroundDiv: {
                backgroundImage:
                    "url(" + require("../assets/login.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
            },
            loginForm: {
              username: "",
              password: "",
            },
            loginRules: {
              username: [
                {required: true, message: "请输入用户名", trigger: "blur"},
                {min: 3, max: 20, message: "长度在 3到 20 个字符", trigger: "blur"},
              ],
              password: [
                {required: true, message: "请输入密码", trigger: "blur"},
                {min: 6, max: 20, message: "密码长度在6到20个字符", trigger: "blur"},
              ],
            },
            role: "管理员登录",
        };
    },
    mounted() {
        toLoad()
    },
    methods: {

        //提交表单
        submitLoginForm(formName) {
            if (!/^[a-zA-Z\d]+$/.test(this.loginForm.username)) {
                this.$message.error("用户名有误,请重新输入");
                return;
            }
            if (!/^[a-zA-Z\d]+$/.test(this.loginForm.password)) {
            this.$message.error("密码有误,请重新输入");
            return;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                        request
                            .post("/api/employee/login",this.loginForm)
                            .then((res) => {
                              console.log(res);
                              if(res.data.code == 1){
                                setToken(res.data.data.token);
                                setUserName(res.data.data.userName)
                                this.$router.push("/adminLayout");
                              }else {
                                this.$message.error(
                                    "用户名或密码错误"
                                );
                              }
                            })
                            .catch((e) => {
                                console.log("e,",e);
                                return false;
                            });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    }
};
</script>

<style lang="scss">
.codeInput {
    width: 70%;
    margin-right: 10px;
}
.findPassword {
    margin-top: 0px;
}
.login-index {
    background: #2b4b6b;
    height: 100%;
    position: relative;
}
.mid-index {
    opacity: 0.9;
    width: 450px;
    height: 390px;
    background: white;
    //绝对定位，相对于最左上角来说
    position: absolute;
    left: 80%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.logo-index {
    background: white;
    height: 130px;
    width: 130px;
    border-radius: 50%;
    padding: 10px;
    //子绝父相,使一个div悬挂在另一个div上中间
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);

    border: 1px solid #eee;
    box-shadow: 0px 0px 10px #ddd;

    img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background: #eeeeee;
    }
}

.loginForm {
    margin-top: 120px;
}
.el-form-item {
    margin-left: 20px;
    margin-right: 20px;
}
//角色单选
.role {
    margin-left: 90px;
    margin-right: 90px;
}
//按钮
.btns {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  margin: 0 auto; /* 左右居中 */
  height: 25px;
}
</style>
